<template>
  <div class="type-status-container">
    <div class="text-gradient">
      <h2>设备类型分布</h2>
    </div>
    <div id="echart-div-type"></div>

    <div class="text-gradient" style="margin-top: -35%">
      <h2>设备状态分布</h2>
    </div>
    <div id="echart-div-status"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { deviceModel, deviceState } from '@/api/homePage'

export default {
  name: 'typeAndStatus',
  data() {
    return {
      chart: null,
      typeChart: null,
      data: [],
      typeData: []
    }
  },

  mounted() {
    this.fetchData()
  },

  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
    if (this.typeChart) {
      this.typeChart.dispose()
      this.typeChart = null
    }
  },

  methods: {
    fetchData() {
      Promise.all([deviceModel(), deviceState()])
        .then(([typeResponse, statusResponse]) => {
          this.typeData = typeResponse.data.data.map(item => ({
            value: item.count,
            name: item.name
          }))

          const statusData = statusResponse.data.data
          this.data = [
            { value: statusData.offline, name: '离线' },
            { value: statusData.online, name: '在线' },
            { value: statusData.sleep, name: '休眠' }
          ]

          this.initTypeChart()
          this.initStatusChart()
        })
        .catch(error => {
          console.error('获取数据失败:', error)
        })
    },

    initTypeChart() {
      this.typeChart = echarts.init(document.getElementById('echart-div-type'))
      let colors = ['#FFB259', '#0697FF']

      let typeRecord = {
        name: '设备类型分布',
        type: 'pie',
        radius: ['28%', '45%'],
        center: ['50%', '33%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 2
        },
        color: colors,
        data: this.typeData
      }

      const option = {
        title: {
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#ffffff',
                fontSize: 24,
                fontWeight: 'bold',
                lineHeight: 20
              },
              name: {
                color: '#ffffff',
                lineHeight: 20
              }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          }
        },
        series: [
          {
            ...typeRecord,
            tooltip: { show: true },
            label: {
              formatter: ' {b|{b}}   \n   {c|{c}个} {per|{d}%}  ',
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 18,
                  lineHeight: 35
                },
                c: {
                  color: '#31ABE3',
                  fontSize: 20
                },
                per: {
                  color: '#31ABE3',
                  fontSize: 20
                }
              }
            },
            labelLine: {
              length: 16,
              length2: 26,
              show: true
            },
            emphasis: {
              show: true
            }
          }
        ]
      }
      this.typeChart.setOption(option)
    },

    initStatusChart() {
      this.chart = echarts.init(document.getElementById('echart-div-status'))
      const option = {
        tooltip: { trigger: 'item', show: false },
        legend: {
          show: true,
          right: 'right',
          textStyle: {
            color: '#F6FAFF',
            fontSize: 18
          }
        },
        series: [
          {
            name: '设备状态分布',
            type: 'pie',
            radius: ['55%', '40%'],
            center: ['50%', '32%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: { show: false },
            data: this.data
          }
        ],
        color: ['#65FF56', '#FF441B', '#F7FF4E']
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.type-status-container {
  height: 400px;
  width: 100%;
}

#echart-div-type {
  height: 100%;
  width: 100%;
  margin-top: -10%;
}

#echart-div-status {
  height: 100%;
  width: 100%;
}

.text-gradient {
  color: #fff;
  display: flex;
  line-height: 70px;
  align-items: center;
  justify-content: center;
}
</style>
